{include file="public:header" /}
<style>
    #lists .w_img_width{width:50px;}
    .weixin .w_img_width{width:290px;height:145px;}
    .w_preview li{line-height: 35px;}
    .w_preview label{display:inline-table;width:70px;text-align:right;vertical-align: top;}
    .weixin{border:1px solid #ccc;border-radius:20px;width:290px;padding:10px;margin-left:70px;color:#404040;font-size:14px;}
    .weixin p{line-height: 25px;}
    .w_replay{width:360px;text-align:center;color:#404040;font-size:14px;line-height: 35px;}
    .upload_btn{display:inline-table;float:none;vertical-align: middle;}
</style>
<!--添加图文回复-->
<div class="subnav">
    <div class="content_menu ib_a blue line_x">
        <a href="{:url('index',['type'=>$type])}"><em>返回列表</em></a><span>|</span>
        <a href="{:url('add')}" {if condition="$type eq 1"}class="on"{/if}><em>添加文本回复</em></a><span>|</span>
        <a href="{:url('add',['type'=>2])}" {if condition="$type eq 2"}class="on"{/if}><em>添加图文回复</em></a><span>|</span>
        <a href="{:url('add',['type'=>3])}" {if condition="$type eq 3"}class="on"{/if}><em>添加多图文回复</em></a>
    </div>
</div>
<form id="info_form" action="{:url('editDo')}" onsubmit="return check();" method="post" enctype="multipart/form-data">
    <div class="pad_lr_10">
        <div class="col_tab">
            <ul class="J_tabs tab_but cu_li">
                <li class="current">编辑图文回复</li>
            </ul>
            <div class="J_panes">
                <div class="content_list pad_10 clearfix">
                    <div class="fl" style="width:50%;">
                    <table width="100%" cellspacing="0" class="search_form">
                        <tbody>
                        <tr>
                            <td>
                                <div class="explain_col">
                                    模型:
                                    <select name="model" id="model">
                                        {volist name='model' id='vo'}
                                        <option value="{$key}" {if condition="$key eq $info['model']"}selected{/if}>{$vo}</option>
                                        {/volist}
                                    </select>
                                    &nbsp;&nbsp;关键词 :
                                    <input type="text" id="keyword" class="input-text" size="25" value="" />
                                    <input type="button" class="btn" value="搜索" onclick="getData();" />
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table width="100%" cellspacing="0" class="table_form">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th width="30%" align="left">图片</th>
                            <th width="10%">操作</th>
                        </tr>
                        </thead>
                        <tbody id="lists" data-uri="{:url('ajaxGetList')}">
                        </tbody>
                    </table>
                        <div id="pages" style="padding:10px;"></div>
                    </div>
                    <div class="pad_lr_10 fl" style="width:40%">
                        <p class="w_replay">微信回复预览(<span style="color:#ff0000;">大图建议360*200</span>)</p>
                        <div class="weixin">
                            <p class="weixin_title">{$info.data.Title}</p>
                            <div class="weixin_cover"><img src="{$info.data.PicUrl}" alt="" class="w_img_width"></div>
                            <p class="weixin_desc">{$info.data.Description}</p>
                        </div>
                        <input type="hidden" name="aid" id="aid" value="{$info.aid}">
                        <input type="hidden" name="type" value="{$type}">
                        <input type="hidden" name="id" value="{$info.id}">
                        <ul class="w_preview">
                            <li><label for="keywords">关键词：</label><input type="text" value="{$info.keyword}" name="keyword" id="keywords" class="input-text" size="47">
                            </li>
                            <li><label></label>多个关键词请用‘，’号隔开</li>
                            <li><label for="title">标题：</label><input type="text" name="data[Title]" value="{$info.data.Title}" id="title" class="input-text" size="47"></li>
                            <li><label for="img">封面图片：</label><input type="text" name="data[PicUrl]" value="{$info.data.PicUrl}" id="img" class="input-text" size="36">
                                <div id="J_upload_img" class="upload_btn" onclick="ajaxUpload('J_upload_img','img');"><span>选择图片</span></div>
                            </li>
                            <li><label for="url">链接地址：</label><input type="text" name="data[Url]" value="{$info.data.Url}" id="url" class="input-text" size="47"></li>
                            <li><label for="description">简介：</label><textarea name="data[Description]" id="description" class="input-text" style="width:300px;height:60px;">{$info.data.Description}</textarea></li>
                        </ul>
                        <p style="color:#ff0000;padding-left:76px;">关键词请用词组，多个关键词请用‘，’分隔，单个关键词不要超过6个字符。图片尺寸建议360*200</p>

                        <div class="mt10"><input type="submit" value="提交" id="dosubmit" name="" class="btn btn_submit" style="margin:0 0 10px 100px;"><br /><br /><br /></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</form>
<script type="text/html" id="templates">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <tr id="news_{{d[i]['id']}}">
        <td class="w_title">{{d[i]['title']}}</td>
        <td class="w_img">{{# if(d[i]['img']){ }}<img src="{{d[i]['img']}}" class="w_img_width" />{{# } }}</td>
        <td class='w_desc' data-desc="{{d[i]['description']}}" align="center"><a href="javascript:;" onclick="selectCon({{d[i]['id']}});">选择</a></td>
    </tr>
    {{# } }}
</script>
<script src="__PUBLIC__/js/jquery.min.1.7.2.js"></script>
<script src="__PUBLIC__/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/layer/laytpl.js"></script>
<script src="__PUBLIC__/js/layer/laypage.js"></script>
<script src="__PUBLIC__/js/plugins/fileuploader.js"></script>
<script>
    getData(1);
    $(function(){
       $("#title").bind('keyup',function(){
           $(".weixin_title").text($(this).val());
       });
        $("#description").bind('keyup',function(){
            var val = $(this).val();
            if(val.length > 54){
                alert('简介最多54个字符');
                $(this).val(val.substring(0,54));
            }else{
                $(".weixin_desc").text(val.substring(0,54));

            }
        });
        $("#keywords").bind('blur',function(){
           var val = $(this).val();
            $(this).val(val.replace(/，/g,','));
        });
    });
    function check(){
        var keyword = $("#keywords").val();
        if(!keyword){
            layer.msg('请填写关键词',{icon:2});
            return false;
        }
        return true;
    }
    function selectCon(id){
        var obj = $("#news_"+id),title = obj.find('.w_title').text(),img = obj.find('img').attr('src'),description = obj.find('.w_desc').data('desc'),desc = description ? description.substring(0,54) : '';
        $(".weixin_title").text(title);
        $(".weixin_cover").html(obj.find('.w_img').html());
        $(".weixin_desc").text(desc);
        $("#title").val(title);
        $("#img").val(img);
        $("#description").val(desc);
        $("#aid").val(id);
        $("#keywords").val('');
    }
    function getData(curr){
        var loading = layer.load(1);
        $.getJSON(document.getElementById('lists').getAttribute('data-uri'), {
            page: curr || 1, //向服务端传的参数
            keyword : $("#keyword").val(),
            model   : $("#model").val()
        }, function(res){
            if(res.status == 1){
                var gettpl = document.getElementById('templates').innerHTML;
                laytpl(gettpl).render(res.data.lists, function(html){
                    document.getElementById('lists').innerHTML = html;
                });
            }else{
                document.getElementById('lists').innerHTML = '<tr><td colspan="3"> '+res.msg+'</td></tr>';
            }
           layer.close(loading);
            //显示分页
            laypage({
                cont: 'pages', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                pages: res.data.total, //通过后台拿到的总页数
                curr: curr || 1, //当前页
                jump: function(obj, first){ //触发分页后的回调
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                        getData(obj.curr);
                    }
                }
            });
        });
    }
    function ajaxUpload(btn,input){
        //上传图片

        var img_uploader = new qq.FileUploaderBasic({
            allowedExtensions: ['jpg','gif','jpeg','png','swf'],
            button: document.getElementById(btn),
            multiple: false,
            action: "{:url('ajaxUploadImg')}",
            inputName: 'img',
            forceMultipart: true, //用$_FILES

            showMessage: function(message){
                $.yingloujie.tip({content:message, icon:'error'});
            },
            onSubmit: function(id, fileName){
                $('#'+btn).addClass('btn_disabled').find('span').text('上传中，请稍候...');
            },
            onComplete: function(id, fileName, result){
                $('#'+btn).removeClass('btn_disabled').find('span').text('上传');
                if(result.status == '1'){
                    $('#'+input).val(result.data);
                    $(".weixin_cover").html('<img src="'+result.data+'" class="w_img_width">');
                } else {
                    $.yingloujie.tip({content:result.msg, icon:'error'});
                }
            }
        });
    }
</script>
</body>
</html>